<template>
    <div class="shop-list" >
        <!-- router-link tag="div" :to="'/home/shopinfo/' +items.id" -->
        <router-link  tag="div" :to="'/home/shopinfo/' +items.id" class="shop-items" v-for="items in shopList" :key='items.id' >
            <img :src="items.img_url" alt="">
            <h4>{{items.title}}</h4>
            <div class="info">
                <p>
                <span>{{items.sell_price}}</span>
                <span class="old">{{items.market_price}}</span>
            </p>
            <p>  
                <span>热卖中</span>
                <span>剩900件</span>
            </p>
            </div>
            
        </router-link>
    </div>
       
</template>
<script>
export default {
    data(){
        return {
            index:1,
            shopList:[]
        }
    },
    created(){
        this.getShopList()
    },
    methods: {
       getShopList(){
           this.$http.get("api/getgoods?pageindex="+this.index).then(result=>{
               if(result.body.status  == 0){
                    this.shopList=result.body.message
                    // console.log(result);
                    
                }
           })
       },
       addlist(){
           this.index++;
           this.getShopList();
       },
    //    routerHtml(id){
    //     //    $router  路由导航对象       $route   路由参数对象
    //     //    this.$router.push('/home/shopInfo/'+id);
    //     // this.$router.push({path:'/home/shopInfo/'+id});
    //     this.$router.push({name:"shopInfo",  param:{id}});

    //    }
       
    },
}
</script>
<style lang="scss" scoped>
    *{
        padding: 0px;
        margin: 0px;
    };
    .shop-list{
        padding: 8px;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        .shop-items{
            width: 49%;
            height: 50vh;
            border: 1px solid black;
            margin-top: 8px;
            background: white;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            img{
                width: 100%;
            }
            .info{
                height: 10vh;
                background:wheat;
                font-size: 16px;
                // display: flex;
                p{
                    display: flex;
                    padding: 8px 10px;
                    box-sizing: border-box;
                    justify-content: space-between;
                    span:nth-child(1){
                        color: red;
                        font-size: 16px;
                    }
                     span:nth-child(2){
                        // color: red;
                        font-size: 10px;
                    }
                    .old{
                        text-decoration: line-through;
                    }

                }
            }

        }
    }
</style>